<template>
  <section class="region-cooperation">
    <h2 class="section-title">地区单位合作</h2>
    <p class="section-subtitle">助力健康中国战略落地，完善健康城市建设</p>
    <div class="cooperation-grid">
      <div v-for="(item, i) in cooperations" :key="i" class="cooperation-item">
        <div class="section-icon">
          <img :src="item.icon" alt="合作图标" class="item-icon" />
          <p class="item-title">{{ item.title }}</p>
        </div>
        <p class="item-desc">{{ item.desc }}</p>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const cooperations = [
  {
    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
    title: 'AI+生命科学创新系统',
    desc: '创新的友福七维AI健康修复系统，30+独家专利及知识产权支撑，实现真正的生命健康'
  },
  {
    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
    title: '丰富的市场验证与成功案例',
    desc: '已服务13+国家、70+地区客户，数千例客户成功案例'
  },
  {
    icon: 'https://images.health.ufutx.com/202506/19/f3c8ac06eca308002736e3e42e026265.png',
    title: '独有技术护城河',
    desc: '创新AI算法×双模型评估体系，精准度超传统300%'
  }
]
</script>

<style scoped lang="less">
.region-cooperation {
  text-align: center;
  padding: 100px 192px;
  background: #ffffff;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color;
    margin-bottom: 20px;
  }
  .section-subtitle {
    font-size: @font-size-lg;
    color: @text-color-secondary;
    margin-bottom: 60px;
  }
  .cooperation-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    //max-width: 1200px;
    margin: 0 auto;

    @media (max-width: @tablet-breakpoint) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: @mobile-breakpoint) {
      grid-template-columns: 1fr;
    }
  }
  .cooperation-item {
    background: #f5f7fe;
    padding: 30px;
    text-align: left;
    .section-icon {
      display: flex;
      align-items: center;
      //gap:;
      .item-icon {
        width: 60px;
        height: 60px;
        padding: 10px;
      }
    }
    .item-title {
      font-size: @font-size-lg;
      font-weight: 600;
      color: @text-color;
    }
    .item-desc {
      font-size: @font-size-sm;
      color: @text-color-secondary;
    }
  }
}
</style>
